<template>
  <!-- <div> -->
  <div class="CardInfo">
    <div class="card">
      <div class="card-top">
        <p class="card__title">{{ info_data?.DIM_SPOT }}</p>
        <div class="rating">
          <!-- <svg width="17" height="17" viewBox="0 0 17 17" fill="none">
                    <path
                      d="M8.51948 1.625C9.1214 1.625 10.0427 4.16625 10.4636 5.43013C10.6014 5.8437 10.9837 6.13054 11.4192 6.14904C12.7373 6.20505 15.375 6.39722 15.375 7.0384C15.375 7.66696 13.5161 9.17543 12.5322 9.92976C12.1816 10.1986 12.0365 10.6604 12.1687 11.082C12.5631 12.34 13.2755 14.8755 12.7573 15.3009C12.2506 15.717 10.2147 14.2326 9.15246 13.4009C8.77021 13.1016 8.22949 13.1012 7.84719 13.4004C6.78473 14.2321 4.75246 15.717 4.28166 15.3009C3.79912 14.8745 4.47615 12.3275 4.84741 11.0727C4.97086 10.6555 4.82425 10.2029 4.47885 9.93826C3.49798 9.18681 1.625 7.66933 1.625 7.0384C1.625 6.3962 4.2711 6.20444 5.5871 6.14878C6.0197 6.13048 6.3998 5.84769 6.53973 5.43793C6.97041 4.17673 7.91633 1.625 8.51948 1.625Z"
                      fill="#00B9AE"
                      stroke="#00B9AE"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
          </svg>-->
          <p class="info">
            <el-rate
              :texts="['超级差', '差', '一般', '良', '优秀']"
              show-text
              disabled
              show-score
              text-color="#A31127"
              score-template="{value} 分"
              v-model="rate_list"
              allow-half
            />
          </p>
          <div class="card_info">
            <div class="card_info_item">
              <h4 class="card_title">详细地址：</h4>
              <div class="card_info_LOCATION">{{ info_data?.LOCATION }}</div>
            </div>
            <div class="card_info_item">
              <h4 class="card_title">营业时间：</h4>
              <!-- <div class="card_info_LOCATION">{{ info_data?.LOCATION }}</div> -->
              <div class="card_info_time">{{ info_data?.OPENTIME }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card__info">
        <p class="episode__num">{{ info_data?.CITY }}</p>
        <p
          class="episode__type"
        >ip属地: {{ info_data?.PROVINCE? info_data?.PROVINCE: info_data?.PROVICNE }}</p>
      </div>
      <div class="card__btns">
        <!-- <button class="add-btn">+</button> -->
        <button class="watch-btn" @click="drawer = true">查看详情</button>
      </div>
    </div>
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">with footer</el-button> -->
    <el-drawer v-model="drawer" :title="info_data?.DIM_SPOT" direction="ltr">
      <template #default>
        <Scenery_info :info_data="info_data" />
      </template>
      <template #footer>
        <div class="drawer__foote_box">
          <!-- dsa -->
          <!-- <button>
            <span class="shadow"></span>
            <span class="edge"></span>
            <span class="front text">Click me</span>
          </button> -->
          <el-button type="primary"  @click="drawer = false">退出</el-button>
        </div>
      </template>
    </el-drawer>
  </div>

  <!-- </div> -->
</template>

<script setup lang="ts">
const drawer = ref(false);
import { getComm_evaluate_count } from "@/request/analysis";
const activeName = ref("first");
const rate_list = ref(1);
let Statistic_list = ref([]);
const props = defineProps({
  city_id_list: {
    type: String,
    default: 0
  },
  info_data: {
    type: String,
    default: 0
  }
});

onMounted(() => {
  // initEcharts();
  // getData();
  // console.log(props.city_id_list);
});

// const getData = async item => {
//   await getComm_evaluate_count({
//     list_id: item
//   }).then(({ data }) => {
//     // console.log(data[0]);
//     Statistic_list.value = data[0];
//     console.log("ssssssss==========sssss",Statistic_list.value);

//     //   }).then(({ data }) => {
//     // console.log(data);

//     // Statistic_list.value = data;
//   });
// };

// watch(
//   () => props.city_id_list,
//   (newValue, oldValue) => {
//     if (newValue) {
//       // console.log("新增");
//       // console.log(newValue);

//       getData(newValue);
//     }
//   }
// );
watch(
  () => props.info_data,
  (newValue, oldValue) => {
    if (newValue) {
      rate_list.value = props.info_data.SPOT_GRADE_TOP5
        ? props.info_data.SPOT_GRADE_TOP5
        : props.info_data.GRADE;
    }
    console.log("ne===========wValue", newValue);
  }
);
</script>

<style lang="scss" scoped>
.CardInfo {
  padding-top: 10px;
  height: 320px;
  width: 100%;
  /* height: 500px; */
  // background-color: aliceblue;
}

.card {
  --width: 80%;
  --height: 80%;
  --primary: #00b9ae;
  --text: #f9f9f9b2;
  --secondary: #f9f9f933;
  --radius: 20px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: var(--width);
  height: var(--height);
  background: linear-gradient(
      180deg,
      rgba(22, 24, 30, 0) 0%,
      rgba(22, 24, 30, 0.7) 65.28%
    ),
    linear-gradient(0deg, rgba(22, 24, 30, 0.4), rgba(22, 24, 30, 0.4));
  background-size: cover;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1em;
  padding-top: 1.4em;
}

/*  */

.card .card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 0.2rem;
}

// .rating {
//   margin-top: 0.5em;
//   width: 85px;
//   height: 16px;
//   background-image: url("data:image/svg+xml,%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20width%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20height%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2017%2017%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M8.51948%201.625C9.1214%201.625%2010.0427%204.16625%2010.4636%205.43013C10.6014%205.8437%2010.9837%206.13054%2011.4192%206.14904C12.7373%206.20505%2015.375%206.39722%2015.375%207.0384C15.375%207.66696%2013.5161%209.17543%2012.5322%209.92976C12.1816%2010.1986%2012.0365%2010.6604%2012.1687%2011.082C12.5631%2012.34%2013.2755%2014.8755%2012.7573%2015.3009C12.2506%2015.717%2010.2147%2014.2326%209.15246%2013.4009C8.77021%2013.1016%208.22949%2013.1012%207.84719%2013.4004C6.78473%2014.2321%204.75246%2015.717%204.28166%2015.3009C3.79912%2014.8745%204.47615%2012.3275%204.84741%2011.0727C4.97086%2010.6555%204.82425%2010.2029%204.47885%209.93826C3.49798%209.18681%201.625%207.66933%201.625%207.0384C1.625%206.3962%204.2711%206.20444%205.5871%206.14878C6.0197%206.13048%206.3998%205.84769%206.53973%205.43793C6.97041%204.17673%207.91633%201.625%208.51948%201.625Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
//   background-repeat: space;
// }

.card .card__info {
  display: flex;
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 400;
  justify-content: space-between;
}

.card .card__btns {
  display: flex;
  gap: 0.6rem;
}

.card button {
  border: none;
  background: none;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  transition: 0.2s;
}

.card button:hover {
  opacity: 0.8;
  transform: scale(0.9);
}

.card .add-btn {
  color: #fff;
  padding: 0.5em 0.8em;
  background: rgba(249, 249, 249, 0.2);
  border-radius: 14px;
}

.card .watch-btn {
  flex: 1;
}
.episode__type {
  color: #fff;
}
.card_info {
  width: 100%;
  height: 110px;
  // background-color: #00b9ae;
  display: flex;
  flex-direction: column;
  .card_info_item {
    margin-bottom: 10px;
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: row;
    // background-color: #141313;
    .card_title {
      font-size: 17px;
      flex: 2;
      // z-index: 99;
    }
    .card_info_LOCATION {
      font-size: 17px;
      flex: 6;
      display: -webkit-box;

      -webkit-box-orient: vertical;

      -webkit-line-clamp: 2;

      overflow: hidden;
      // z-index: 99;
    }
    .card_info_time {
      font-size: 17px;
      flex: 6;
      display: -webkit-box;

      -webkit-box-orient: vertical;

      -webkit-line-clamp: 3;

      overflow: hidden;
      // z-index: 99;
    }
  }
}
:deep(.el-drawer__title) {
  // height: 100px;
  padding: 0;
  font-size: 30px;
  color: black;
  font-weight: 900;
  font-family: '楷体';
  // background-color: rgba(255, 255, 255, 0.9);
}
</style>